<div class="panel">
  <h3><%= local_assigns[:title] || (action_type == :approve ? '审核通过' : '审核拒绝') %></h3>

  <div class="panel_contents">
    <div class="work-order-info">
      <h4>工单信息</h4>
      <table>
        <tr>
          <th>工单ID</th>
          <td><%= work_order.id %></td>
        </tr>
        <tr>
          <th>报销单号</th>
          <td><%= work_order.reimbursement.invoice_number %></td>
        </tr>
        <tr>
          <th>问题类型</th>
          <td><%= work_order.problem_type %></td>
        </tr>
        <% if work_order_type == :communication %>
          <tr>
            <th>问题描述</th>
            <td><%= work_order.try(:problem_description) || 'N/A' %></td>
          </tr>
        <% else %>
          <tr>
            <th>问题描述</th>
            <td><%= work_order.problem_description %></td>
          </tr>
        <% end %>
      </table>
    </div>

    <% if work_order_type == :communication && defined?(work_order.communication_records) %>
      <div class="communication-records">
        <h4>沟通记录</h4>
        <% if work_order.communication_records.any? %>
          <table>
            <thead>
              <tr>
                <th>沟通人角色</th>
                <th>沟通人姓名</th>
                <th>沟通方式</th>
                <th>沟通内容</th>
                <th>沟通时间</th>
              </tr>
            </thead>
            <tbody>
              <% work_order.communication_records.order(recorded_at: :desc).each do |record| %>
                <tr>
                  <td><%= record.communicator_role %></td>
                  <td><%= record.communicator_name %></td>
                  <td><%= record.communication_method %></td>
                  <td><%= record.content %></td>
                  <td><%= record.recorded_at.strftime("%Y-%m-%d %H:%M") %></td>
                </tr>
              <% end %>
            </tbody>
          </table>
        <% else %>
          <p>暂无沟通记录</p>
        <% end %>
      </div>
    <% end %>

    <%= semantic_form_for [:admin, work_order], url: form_url, method: form_method do |f| %>
      <%= f.inputs do %>
        <% if work_order_type == :audit %>
          <% if action_type == :approve %>
            <%= f.input :audit_comment, label: (label || '审核意见'), input_html: { rows: 3, id: 'audit_comment_field' }, required: true %>
            <%= f.input :audit_date, label: '审核日期', as: :date_select, input_html: { value: Date.today } %>
            <%= f.input :processing_opinion, as: :hidden, input_html: { value: '可以通过' } %>
          <% else %>
            <!-- 两级级联下拉选择 -->
            <%= f.input :fee_type_id, as: :select,
                    collection: FeeType.active.order(:code).map { |ft| [ft.display_name, ft.id] },
                    include_blank: '请选择费用类型',
                    input_html: { id: 'fee_type_select' },
                    required: true %>
            
            <%= f.input :problem_type_id, as: :select,
                    collection: [],
                    include_blank: '请先选择费用类型',
                    input_html: { id: 'problem_type_select' },
                    required: false %>
            
            <%= f.input :audit_comment, label: (label || '拒绝原因'),
                    input_html: { rows: 3, id: 'audit_comment_field' },
                    required: false,
                    hint: '当未选择问题类型时，必须填写审核意见' %>
            
            <%= f.input :audit_date, label: '审核日期', as: :date_select, input_html: { value: Date.today } %>
            <%= f.input :processing_opinion, as: :hidden, input_html: { value: '无法通过' } %>
            
            <script>
              document.addEventListener('DOMContentLoaded', function() {
                const feeTypeSelect = document.getElementById('fee_type_select');
                const problemTypeSelect = document.getElementById('problem_type_select');
                const auditCommentField = document.getElementById('audit_comment_field');
                
                // 存储问题类型数据
                let problemTypesData = [];
                
                // 初始化问题类型下拉框
                function updateProblemTypes() {
                  const feeTypeId = feeTypeSelect.value;
                  
                  // 清空当前选项
                  problemTypeSelect.innerHTML = '<option value="">请选择问题类型</option>';
                  
                  if (!feeTypeId) {
                    return;
                  }
                  
                  // 获取对应的问题类型
                  fetch('/admin/problem_types.json?fee_type_id=' + feeTypeId)
                    .then(response => response.json())
                    .then(data => {
                      problemTypesData = data; // 存储数据以便后续使用
                      
                      data.forEach(problemType => {
                        const option = document.createElement('option');
                        option.value = problemType.id;
                        option.textContent = problemType.display_name;
                        problemTypeSelect.appendChild(option);
                      });
                      
                      // 如果只有一个问题类型，自动选择它
                      if (data.length === 1) {
                        problemTypeSelect.value = data[0].id;
                        updateProblemDescription();
                      }
                    })
                    .catch(error => console.error('Error fetching problem types:', error));
                }
                
                // 更新问题描述 - 移除自动填充审核意见的代码
                function updateProblemDescription() {
                  const problemTypeId = problemTypeSelect.value;
                  
                  if (!problemTypeId || !auditCommentField) {
                    return;
                  }
                  
                  // 查找选中的问题类型
                  const selectedProblemType = problemTypesData.find(pt => pt.id == problemTypeId);
                  
                  // 移除自动填充审核意见的代码
                  // 根据客户需求，不再自动填充审核意见
                }
                
                // 设置事件监听器
                if (feeTypeSelect) {
                  feeTypeSelect.addEventListener('change', updateProblemTypes);
                  // 初始加载
                  updateProblemTypes();
                }
                
                if (problemTypeSelect) {
                  problemTypeSelect.addEventListener('change', updateProblemDescription);
                }
              });
            </script>
          <% end %>
        <% elsif work_order_type == :communication %>
          <%= f.input :audit_comment, label: (label || (action_type == :approve ? '审核意见' : '拒绝原因')), input_html: { rows: 3, id: 'audit_comment_field' }, required: true %>
          <%= f.input :problem_type_id, as: :hidden %>
          <%= f.input :processing_opinion, as: :hidden, input_html: { value: (action_type == :approve ? '可以通过' : '无法通过') } %>
        <% end %>
      <% end %>
      <div class="actions">
        <%= f.submit (button_text || (action_type == :approve ? '确认通过' : '确认拒绝')), class: "button" %>
        <% if work_order_type == :audit %>
          <%= link_to "取消", admin_audit_work_order_path(work_order), class: "button" %>
        <% else %>
          <%= link_to "取消", admin_communication_work_order_path(work_order), class: "button" %>
        <% end %>
      </div>
    <% end %>
  </div>
</div>

<style>
  .work-order-info, .communication-records {
    margin-bottom: 20px;
  }
  .work-order-info table, .communication-records table {
    width: 100%;
    border-collapse: collapse;
  }
  .work-order-info th, .work-order-info td,
  .communication-records th, .communication-records td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
  }
  .work-order-info th, .communication-records th {
    background-color: #f5f5f5;
  }
  .work-order-info th {
    width: 120px;
  }
  .actions {
    margin-top: 20px;
    text-align: right;
  }
  .button {
    margin-left: 10px;
  }
</style>